<template>
  <div class="wrapper">
    <div class="SideBar">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item title="全部商品" />
        <van-sidebar-item title="小米" />
        <van-sidebar-item title="华为" />
        <van-sidebar-item title="苹果" />
      </van-sidebar>
    </div>
    <div class="ItemArea">
      <div class="CategoryTitle">
        —&nbsp;&nbsp;&nbsp;&nbsp;手机&nbsp;&nbsp;&nbsp;&nbsp;—
      </div>
      <div class="ItemList">
        <ul>
          <li v-for="(item,index) in itemList" :key="index" @click="detailInfo(item.itemid)">
            <img
              :src="item.itemimg"
              style="width: 80px; height: 80px"
            />
            <div style="font-weight: lighter; font-size: 12px">
              {{item.itemname}}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <Footer/>
</template>

<script>
import Footer from "../../Footer";
export default {
  data() {
    return {
      activeKey: 0,
      itemList:[]
    };
  },
  methods: {
    onChange: function (index) {
      let category;
      if(index===0) category='全部'
      if(index===1) category='小米'
      if(index===2) category='华为'
      if(index===3) category='苹果'
      this.axios.get("getItemList.php?category="+category).then(response=>{
        this.itemList=response.data
      })
      console.log(category);
    },
    detailInfo:function(itemID){
      this.$router.push({name:'DetailInfo',query:{itemID:itemID}})
    }
  },
  created() { 
    let category='全部'
    console.log(category)
    this.axios.get("getItemList.php?category="+category).then(response=>{
      this.itemList=response.data
    })
  },
  components:{
    Footer,
  }
};
</script>

<style scoped>
.van-sidebar-item--select::before {
  background-color: #1989fa;
}
.wrapper {
  width: 100%;
  height: 85vh;
  margin-top: 50px;
  position: relative;
}
.SideBar {
  float: left;
  height: 100%;
  width: 80px;
}
.ItemArea {
  float: left;
  width: 294px;
  height: 100%;
  /* padding: 0px 20px; */
}
.CategoryTitle {
  width: 100%;
  height: 100px;
  line-height: 100px;
  color: #e0e0e0;
}
.ItemList {
  width: 100%;
  height: 525px;
}
.ItemList ul li {
  width: 90px;
  height: 100px;
  float: left;
  margin-right: 8px;
  margin-bottom: 10px;
}
</style>
